﻿;
(function() {
	// basePanel goes here.
	// @private
	var actions = {
		close : {
			text : '关闭',
			iconCls : 'icon16-quit',
			handler : function(btn) {
				Ext.Msg.confirm(document.title, '是否关闭页面？', function(text) {
							if (text == 'yes') {
								this.ownerCt.remove(this);
								this.removeAll(true);
							}
						}, this // 相当于btn.ownerCt.ownerCt
						);
			}
		},
		printHTML : {

		}
	};
	
	/**
	 * @class $$.basePanel 
	 */
	$$.basePanel = Ext.extend(Ext.Panel, {
		 autoLoad : false
		,border   : false
		,closable : true
		,title    : '正在加载内容……'
		,cls      : 'edk-formPanel'
		,html : {
			 tag : 'form'
			,cls : 'edkForm'
		}
		,tbar : true
		,bbar : true
		,initComponent : function() {
			this.addEvents('markupReady');
			this.on('markupReady', this.createDatePicker, this);
			this.on('markupReady', this.createHTMLEditor, this);
		
			this.actions = {};
			// 创建上、下的工具条
			if (this.tbar) {
				this.tbar = new Ext.Toolbar(this.createTopBar());
			}

			if (this.bbar) {
				this.bbar = new Ext.ux.StatusBar({
							defaultText : this.title
						});
			}
			$$.basePanel.superclass.initComponent.call(this);
		}
		// @overrided
		,afterRender : function(arg) {
			$$.basePanel.superclass.afterRender.call(this, arg);
			this.formEl = this.el.child('form');
		},
		createDatePicker : function() {
		}

		/**
		 * 创建在线HTML编辑器的控件。
		 */
		,createHTMLEditor : function() {
			var htmlEditor, heightNum = this.getHeight() - 200, widthNum = this
					.getWidth()
					- 50, getChildFn = this.formEl.child // 有时候直接引用Fn要额外注意，注意没有作用域的关联
			, editorEl = this.formEl.child('textarea.edk-htmlEditor');

			if (editorEl) {
				htmlEditor = new Ext.form.HtmlEditor({
					plugins : new Ext.ux.HtmlEditorImageInsert,
					applyTo : editorEl
				});
//				htmlEditor.on('initialize', function(h){
////					h.iframe.
//					var iframDoc = h.iframe.contentWindow.document;
//					var baseTag  = iframDoc.createElement('base');
//					baseTag.href = '/whatsext/';
//					iframDoc.getElementsByTagName('head')[0].appendChild(baseTag);
//				});
				new Ext.Container({
					renderTo : this.formEl
							.child('.edk-htmlEditor-holder'),
					height : heightNum > 0 ? heightNum : 400,
					width : widthNum,
					layout : 'fit',
					border : false,
					items : htmlEditor
				});

				this.htmlEditor = htmlEditor;
			}
		}
		
		/**
		 * 对actions添加新的Ext.Action配置项对象。
		 * 变量actions是private不可见的，应通过此方法加入新的动作类型，修改变量actions。
		 * 注意：虽然可以直接把将actions设为public，但出于封装代码的原因，不适应这样做。
		 * @param {Obejct} a 新动作的配置。
		 */
		,addAction : function(a){
			$$.apply(actions, a);
		}
		
		/**
		 * 定义了顶部工具条的有什么控件。
		 * 可以通过重写该方法获得新的顶部工具条按钮、下拉菜单……列表。
		 * @return {Array} 创建菜单的配置项对象构成的数组。
		 */
		,createTopBar : function() {
			var arr = [];
			var _actions = {};
			for (var i in actions) {
				_actions[i] = actions[i];
				_actions[i].scope = this;
				this.actions[i] = new Ext.Action(_actions[i]);
				arr.push(this.actions[i]);
			}

			return ['->'].concat(arr);
		}
	});
})();;
(function() {
	function collectData() {
		var data = serializeForm(this.formEl);
		if (this.htmlEditor) {
			// if not trim(), serverside will get rawPOST fail.
			data.content = encodeURIComponent($$.trim(this.htmlEditor.getValue()));
		}
		return data;
	}
	var actions = {
		save : {
			text : '保存',
			iconCls : 'icon16-save',
			handler : function(ui) {
				ui.disable();
				this.body.mask();

				var data = collectData.call(this);
				this.onBeforeSave(data);
				l(this.baseParam);
				function callback(){
					this.onAfterSave();
					ui.enable();
					this.body.unmask();
				}
				if(this.url){
					Ext.Ajax.request({
						 url      : this.url
						,params   : data
						,callback : callback
						,scope    : this
					});
				}else{
					if (this.data.State == 'create') {
						blogService.create(data, callback, this);
					} else {
						blogService.update(data, callback, this);
					}				
				}
			}
		}

		,
		reset : {
			text : '复位',
			handler : function() {
				this.fireEvent('beforeReset', this);
				this.formEl.dom.reset();
			}
		}

		,
		del : {
			text : '删除',
			iconCls : 'icon16-delete',
			disabled : true,
			tooltip : '<b>删除记录</b><br />数据的删除分别对应1行删除的DELETE指令。',
			handler : function() {
				var smObj = this[0], callback = this[1], scope = this[2], showMsg = function() {
					Ext.feedback.msg(Edk.config.tips, '“{0}”共{1}项删除完毕。'.format(
									textStr.substr(0, 20), i));
				}, callback = (callback && typeof(callback) == 'function')
						? showMsg.createSequence(callback, scope)
						: showMsg, msg = "您确定<b>删除</b>以下{0}条记录？<br/>"
						+ "-----------------------------------<br/>"
						+ "<ol class=\"showListDecimal\"><li>{1}</li></ol>", selection, textStr, idNum, i;

				if (smObj.hasSelection() || !((selection[0].data)['ID'])) {
					selection = smObj.getSelections();
				} else {
					Edk.Suite.Action.noSelected();
					return false;
				}
				if (selection.length == 1) {
					textStr = (selection[0].data)['title'];
					idNum = (selection[0].data)['ID'];
					i = 1;
				} else {
					textStr = [], idNum = [];
					for (i = 0; i < selection.length; i++) {
						textStr.push((selection[i].data)['title']);
						idNum.push((selection[i].data)['ID']);
					}
					textStr = textStr.join('</li><li>');
				}

				Ext.Msg.show({
							title : document.title,
							msg : msg.format(i, textStr),
							width : 340,
							buttons : Ext.MessageBox.YESNO,
							icon : Ext.MessageBox.QUESTION,
							multiline : false,
							animEl : animEl,
							fn : function(btn) {
								if (btn != "yes")
									return false;
								blogService.del(idNum.pop ? idNum : [idNum],
										callback, scope);
							}
						});
			}
		}

	};

	// ,_MsgBar_ReadyText : '对象{0}准备就绪。'

	/**
	 * @class Edk.formPanel
	 * @extends Ext.Panel 
	 * 提供应用程序的一些基本动作，诸如“新建”、“保存”和“删除”等。
	 * 异步发送FORM数据的类，把AjaxForm封装到Panel，作为构建UI界面的基本视觉元素。可实现无刷新提交表单。
	 * 该组件需要Ext插件Ext.ux.StatusBar作为标题栏，位于底部出现。
	 */
	$$.formPanel = Ext.extend($$.basePanel, {
		
		/**
		 * 加入保存按钮、复位按钮、删除按钮。
		 * @overrided
		 * @return {Array}
		 */
		createTopBar : function() {
			var arr = $$.formPanel.superclass.createTopBar.call(this);
			var _actions = {};
			for (var i in actions) {
				_actions[i] = actions[i];
				_actions[i].scope = this;
				_actions[i] = new Ext.Action(_actions[i]);
				this.actions[i] = _actions[i];
			}
			var _arr = [_actions.save, _actions.reset, _actions.del];

			return _arr.concat(arr);
		},
		
		/**
		 * @property data
		 * @type {Obejct}
		 * 保存该控件的一些相关数据相信。应符合该结构的数据才能被$$.formPanel读取。
		 * 该属性定义一般由构造器的参数传入。
		 */
		data : {
			ID : 0,
			Name : '',
			State : null
		}

		/**
		 * @overried
		 * 透过AJAX通信至服务端，获取HTML内容，渲染到面板中。
		 */
		,afterRender : function() {
			$$.formPanel.superclass.afterRender.apply(this, arguments);
			this.on('markupReady', this.disableBtns, this);
			if (this.url) {
				var s = this;
				// 返回纯文本的地址
				Ext.Ajax.request({
					 url      : this.url
					,callback : (function(){
						s.fireEvent('markupReady', this);
						if(s.getBottomToolbar()){
							s.getBottomToolbar().setStatus({
								 text    : '就绪'
								,iconCls : 'ok-icon'
							});
						}
						if(s.actions.del){
							s.actions.del.disable();
						}
					}).createInterceptor(this.onPageLoad)
					,scope    : this.formEl
				});
			} else {
				// 返回JSON， for Ext-Direct
				if (this.data.ID && this.data.State == 'update') {
					// 匿名回调函数有两个任务：
					// 一、将result（里面是表单的HTML片段）通过formEl.insertHtml插入到formPanel
					// 二、fireEvent是Ext触发事件的方法，每个组件都会有。这里触发我们自定义的markupReady、update/create事件。
					// 更新或新建都有对应的事件状态。
					this.loadUpdateFn({
						ID : this.data.ID
					}, function(response) {
						this.formEl.insertHtml('AfterBegin', response);// 装置模板
						this.fireEvent('markupReady', this, response);
						this.onUpdate();
					}, this);
							// get the FORM from the remoting.
				} else if(this.data.State == 'create') {
					this.loadCreateFn(function(response) {
						this.formEl.insertHtml('AfterBegin', response);// 装置模板
						this.fireEvent('markupReady', this, response);
					}, this);
				}
			}
		}
		// 当得到无效ID时，禁止有关按钮
		,disableBtns: function(){
			var idObj = this.formEl.child('input[@name=ID]');
			if(!idObj || !idObj.getValue()){
				this.actions.save.disable();
				this.actions.reset.disable();
				this.actions.del.disable();
			}
		}
		,onPageLoad: function(req, isOk, resp){
			this.update(isOk === true ? resp.responseText : '加载HTML错误');
		}
		,onBeforeSave : function() {
			// 通知状态栏
			var bbar = this.getBottomToolbar();
			if (bbar) {
				bbar.setStatus({
					text : '通讯中…',
					iconCls : 'ok-icon'
				});
			}
		}
		,onAfterSave : function() {
			Ext.feedback.msg.defer(1500, this, [document.title, '已保存信息！']);
			
			// 将表单的状态转换为“update”的
			if(this.data.State == 'create'){
				this.onUpdate();
			}
			
			if(this.getBottomToolbar()){
				this.getBottomToolbar().setStatus("上次保存于" + (new Date).format('hh:MM:ss'));
			}
		}
		,onUpdate : function() {
			var idObj = this.formEl.child('input[@name=ID]');
			if(idObj && idObj.getValue()){
				var 
					 maxShow = 10
					,title   = this.formEl.child('input[@name=title]').getValue();
				
				this.setTitle(title.length > maxShow ? title.substr(0, maxShow) + '...' : title);
				// 通知状态栏
				this.getBottomToolbar().setStatus({
					 text    : title
					,iconCls : 'ok-icon'
				});
				this.actions.del.enable();
			}else{
				this.setTitle('无效的记录');
			}
		}
		,onCreate : function() {
			this.getBottomToolbar().setStatus({
				text : "请保存新建的文档"
			});
		}
	});

	$$.formPanel.Window = Ext.extend(Ext.Window, {
		width : 700,
		height : 400,
		modal : true,
		layout : 'fit',
		initComponent : function() {
			this.items = new $$.formPanel({
				title : null,
				baseParams : this.baseParams,
				tbar : false,
				bbar : false,
				url : this.url
			});

			// 设置事件处理器的作用域
			this.buttons[1].scope = this.buttons[2].scope = this.items;
			this.buttons[3].scope = this;

			$$.formPanel.Window.superclass.initComponent.apply(this, arguments);
		}

		,
		buttons : ['->', actions.save, actions.reset, {
					text : '关闭',
					handler : function() {
						this.close();
					}
				}]
	});
})();

;
(function() {
	var action = {
		save : {
			text : '保存',
			iconCls : 'icon16-save',
			handler : function(btn) {
				var dataObj, bbar = this.getBottomToolbar(), callback = function(
						oResponse) {
					if (this.state == 'create') {
						this.recordId = oResponse['ID'];
						Ext.feedback.msg('提示信息', '新建记录（#id:' + this.recordId
										+ '）成功');

					} else if (this.state == 'update') {
						Ext.feedback.msg('提示信息', '编辑记录（#id:' + this.recordId
										+ '）成功');
						this.getBottomToolbar().setStatus("上次保存于"
								+ (new Date).format('hh:MM:ss'));
					}
				};


			}
		}
	};
	$$.ExtDirectForm = Ext.extend($$.formPanel, {});
})();